<div class="container-fluid pages-container" ng-class="{'pages-sidebar-hide' : !sideBarStateShow}">
    <div class="pages-edit-container col-xs-9">
        <div class="panel panel-custom editor">
            <div class="panel-heading editor">页面编辑-{{Page.page_name}}
                <a ng-click="switchTreeSidebar()" class="show-sidebar">
                    <i class="fa fa-bars"></i>
                </a>
                <a ng-click="gotoDefault()" class="go-default">
                    <i class="glyphicon glyphicon-search"></i>返回
                </a>
                <a ng-click="refresh()" class="go-default">
                    <i class="glyphicon glyphicon-random"></i>刷新
                </a>
                <a ng-click="import()" class="go-default">
                    <i class="glyphicon glyphicon-upload"></i>导入
                </a>
                <a ng-click="export()" class="go-default">
                    <i class="glyphicon glyphicon-download"></i>导出
                </a>
                <a ng-click="settings()" class="go-default">
                    <i class="glyphicon glyphicon-cog"></i>设置
                </a>
                <a ng-click="save()" class="btn-save">
                    <i class="glyphicon glyphicon-save"></i>保存
                </a>
                <span class="page-size">
                    <input type="text" ng-model="pageWidth" class="form-control"
                           required name="pageWidth" id="pageWidth" placeholder="宽">
                    <input type="text" ng-model="pageHeight" class="form-control"
                           required name="pageHeight" id="pageHeight" placeholder="高">
                    <a ng-click="resetSize()" class="go-default">
                        <i class="glyphicon glyphicon-repeat"></i>还原
                    </a>
                    <a ng-click="setSize()" class="go-default">
                        <i class="glyphicon glyphicon-retweet"></i>缩放
                    </a>
                </span>
            </div>
            <div class="panel-body editor">
                <div class="scroll-container" scroll-container="" size="pageSize">
                    <div id="page-designer" init-layout-plugin="" pageid="LayoutPageId"></div>
                </div>
            </div>
        </div>
    </div>
    <div prevent-right-click class="col-xs-3 charts-tree-container">
        <div class="page-charts-container">
            <div class="charts-title">
                <i class="glyphicon glyphicon-stats"></i>
                <span>指标选择</span>
            </div>
            <div class="row charts-tree page-charts-tree">
                <div class="container-scroll">
                    <treecontrol class="tree-custom"
                                 tree-model="treeModels"
                                 options="treeOptions"
                                 selected-node="selected"
                                 expanded-nodes="expandedFolders"
                                 on-selection="itemSelected(node)">
                <span class="tree-node-item" ng-class="{'index-node-select':node.type=='element'}">
                    <span ng-switch="" on="node.type">
                         <span ng-switch-when="folder" class="glyphicon glyphicon-folder-open chart_node"
                               aria-hidden="true"></span>
                         <span ng-switch-when="element" class="glyphicon glyphicon-stats chart_node"
                               aria-hidden="true"></span>
                    </span>
                    <a class="tree-node-hover">{{node.name}}</a>
                    <span ng-switch="" on="node.type">
                        <span ng-switch-when="element" class="glyphicon glyphicon-hand-left" aria-hidden="true"></span>
                    </span>
                </span>
                    </treecontrol>
                </div>
            </div>
        </div>
        <div class="page-charts-container">
            <div class="charts-title">
                <i class="glyphicon glyphicon-stats"></i>
                <span>页面指标</span>
            </div>
            <div class="row charts-tree page-charts-tree">
                <div class="container-scroll">
                    <ul class="list-charts">
                        <li ng-repeat="pageChart in pageCharts" context-menu data-target="menu-{{pageChart.menuId}}">
                            <span ng-click="selectChart(pageChart)" class="charts-item"><i
                                    class="glyphicon glyphicon-stats"></i>
                                <span>
                                <a class="list-node-hover">{{pageChart.chartName}}</a>
                                </span>
                            </span>
                            <div class="dropdown position-fixed" id="menu-{{pageChart.menuId}}"
                                 ng-if="layoutPlugin._layoutType=='free'">
                                <ul class="dropdown-menu" role="menu" title="{{pageChart.chartName}}">
                                    <li ng-click="menuHandle($event,pageChart,'MoveTop')" class="menuItem">
                                        <span class="glyphicon glyphicon-triangle-top"></span> 指标置顶
                                    </li>
                                    <li ng-click="menuHandle($event,pageChart, 'MoveUp')" class="menuItem">
                                        <span class="glyphicon glyphicon-menu-up"></span> 指标上移
                                    </li>
                                    <li ng-click="menuHandle($event,pageChart, 'MoveDown')" class="menuItem">
                                        <span class="glyphicon glyphicon-menu-down"></span> 指标下移
                                    </li>
                                    <li ng-click="menuHandle($event,pageChart, 'MoveBottom')" class="menuItem">
                                        <span class="glyphicon glyphicon-triangle-bottom"></span> 指标置底
                                    </li>
                                    <li ng-click="menuHandle($event,pageChart, 'Hide')" class="menuItem">
                                        <span class="glyphicon glyphicon-eye-close"></span> 指标暂隐
                                    </li>
                                    <li ng-click="menuHandle($event,pageChart, 'UnHide')" class="menuItem">
                                        <span class="glyphicon glyphicon-eye-open"></span> 指标全显
                                    </li>
                                    <li ng-click="menuHandle($event,pageChart, 'Lock')" class="menuItem">
                                        <span class="glyphicon glyphicon-lock"></span> 指标锁定
                                    </li>
                                    <li ng-click="menuHandle($event,pageChart, 'Edit')" class="menuItem">
                                        <span class="glyphicon glyphicon-cog"></span> 指标设置
                                    </li>
                                    <li ng-click="menuHandle($event,pageChart, 'Delete')" class="menuItem">
                                        <span class="glyphicon glyphicon-trash"></span> 指标移除
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>